<template>
  <view class="lottery-card-item">
    <view class="special-card" v-if="type == 8">
      <view class="masks">
        <image class="lottery-bg" :src="mysterious_img" mode="widthFix" />
        <view class="shadows">
          <image
            :src="details.goods_image"
            mode="widthFix"
            :alt="details.goods_name"
          />
        </view>

        <view class="unknown"> ? </view>
      </view>

      <view class="front">
        <image class="lottery-bg" :src="typeList[8].bg" mode="widthFix" />

        <view class="lottery-content-item">
          <image
            :hidden="!showStatus || !show"
            class="cover-lottery"
            :src="details.goods_image"
            mode="widthFix"
            :alt="details.goods_name"
          />
          <view class="unknown" v-if="!show"> ? </view>
          <view class="lottery-name-item nowrap_ellipsis" v-else>
            {{ details.goods_name }}
          </view>
        </view>
        <!-- 奖品 标签 名 -->
        <view class="type-name">
          <image class="type-tag" :src="typeList[type].tag" />

          <view class="text-name yfs-tag" :class="typeList[type].tagClass">
            <text class="">
              {{ details.reward_name }}
            </text>
            赏
          </view>
        </view>
      </view>
      <view class="front fol">
        <image class="lottery-bg" :src="typeList[8].bg" mode="widthFix" />

        <view class="lottery-content-item">
          <image
            :hidden="!showStatus || !show"
            class="cover-lottery"
            :src="details.goods_image"
            mode="widthFix"
            lazy-load
            :alt="details.goods_name"
            @load="imgLoad"
          />
          <view class="unknown" v-if="!show"> ? </view>
          <view class="lottery-name-item nowrap_ellipsis" v-else>
            {{ details.goods_name }}
          </view>
        </view>
        <!-- 奖品 标签 名 -->
        <view class="type-name">
          <image class="type-tag" :src="typeList[type].tag" />

          <view class="text-name yfs-tag" :class="typeList[type].tagClass">
            <text class="">
              {{ details.reward_name }}
            </text>
            赏
          </view>
        </view>
      </view>
      <!-- v-if="flashImg.status"  :src="flashImg.url" $IMG_URL + '/uploads/20230520/e593eed6e0d8688f380ecb56440ed645.png'-->
      <view class="flash-border" v-if="flashImg.status">
        <img class="the-flash" :src="flashImg.url" />
      </view>
    </view>

    <view class="group-card" v-else>
      <image class="lottery-bg" :src="typeList[type].bg" mode="widthFix" />
      <view class="lottery-content-item">
        <image
          :hidden="!(showStatus && show)"
          class="cover-lottery"
          :src="details.goods_image"
          mode="widthFix"
          lazy-load="false"
          :alt="details.goods_name"
          @load="imgLoad"
        />
        <!-- <view class="unknown" v-if="!(showStatus && show)"> ? </view> -->
        <!-- history -->
        <view class="lottery-name-item nowrap_ellipsis">
          {{ details.goods_name }}
        </view>
      </view>
      <!-- 奖品 标签 名 -->
      <view class="type-name">
        <image class="type-tag" :src="typeList[type].tag" />

        <view class="text-name yfs-tag" :class="typeList[type].tagClass">
          <text class="">
            {{ details.reward_name }}
          </text>
          赏
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { DRAW_MASKED, DRAW_TYPE } from '../portrait/portait_config';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    // show: {
    //   type: Boolean,
    //   default: false,
    // },
    number: {
      type: [String, Number],
      default: 0,
    },
    type: {
      type: [String, Number],
      default: '6',
    },
    details: {
      type: Object,
      default: () => ({}),
    },
    cover: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      showStatus: false,
      show: false,
      mysterious_img: DRAW_MASKED,

      //闪电动画
      flashImg: {
        status: false,
        url: '',
        count: 0,
      },
      //  赏类型
      typeList: DRAW_TYPE,
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {
    let constant = 0.4;
    let time = constant ** 2 * 100 * this.number ** 2 + constant * 100 + 2000;
    if (this.type == 8) {
      this.loadingFlashImg();
    }
    setTimeout(() => {
      this.show = true;
    }, time);
  },
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    imgLoad() {
      this.showStatus = true;
    },

    // 抽奖动画加载
    loadingFlashImg() {
      const fn = () => {
        uni.getImageInfo({
          src:
            this.$IMG_URL +
            '/uploads/20230520/e593eed6e0d8688f380ecb56440ed645.png',
          success: (result) => {
            this.flashImg = {
              status: true,
              url: result.path,
              count: this.flashImg.count,
            };
          },
          fail: () => {
            if (this.flashImg.count == 3) {
              return;
            } else {
              this.flashImg.count = this.flashImg.count + 1;
              fn();
            }
          },
        });
      };
      fn();
    },
  },
};
</script>
<style lang="scss" scoped>
@import 'static/style/prize.scss';
view,
image {
  max-width: none;
}
.lottery-card-item {
  position: relative;
  width: 101rpx;
  height: 139rpx;
  // overflow: hidden;
  --timing: 0.4s;
  transform: scale(1.2);

  .type-name {
    position: absolute;
    top: 19rpx;
    left: 8rpx;
    width: 32.5rpx;
    height: 15rpx;

    .text-name {
      position: relative;
      z-index: 1;
      left: -2rpx;
      width: 100%;
      height: 100%;
      font-size: 8rpx;
      color: #fff;
      text-align: center;
      line-height: 15rpx;
      font-weight: 600;
    }
    text {
      margin-right: 1rpx;
      font-size: 12rpx;
    }

    .type-tag {
      position: absolute;
      top: 0;
      left: 0;
      width: 32.5rpx;
      height: 15rpx;
    }
  }

  .group-card {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .flash-border {
    display: var(--sf);
    position: absolute;
    top: -22.5px;
    left: -16rpx;
    z-index: 20;
    width: 135rpx;
    height: 180rpx;
    overflow: hidden;
    .the-flash {
      flex-shrink: 0;
      position: absolute;
      top: 1rpx;
      transform: scaleY(0.9);
      width: 2025rpx;
      height: 180rpx;
      // background-color: #000;
      animation: move-flash 0.8s steps(15, end) 0s 2 normal forwards;
    }
  }

  .special-card {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: calc(101rpx * 3.5);

    --m: -720deg;
    --f: -540deg;

    --dtime: 0.3s;

    --opy: 0;
    --sae: 1;
    --shadow: 0;

    --sf: none;

    animation: flop-end 1.5s ease-in 4s 1 normal forwards;

    & > view {
      backface-visibility: hidden;
    }
    .masks {
      position: absolute;
      top: 0;
      left: 0;

      transform: rotateY(var(--m));
      transition: all var(--dtime);

      width: 100%;
      height: 100%;
    }

    .shadows {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 85%;
      height: 100%;
      // background-color: #000;
      opacity: var(--shadow);
      transition: all var(--dtime);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        position: relative;
        left: -101rpx;
        width: 85%;
        filter: drop-shadow(101rpx 0 1px #fb6497);
      }
    }

    .front.fol {
      z-index: 7;
      transform: rotateY(var(--f)) scale(var(--sae));
      opacity: var(--opy);
    }
    .front {
      position: absolute;
      top: 0;
      left: 0;

      transform: rotateY(var(--f));
      transition: all var(--dtime);

      width: 100%;
      height: 100%;
    }
  }

  .lottery-content-item {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .lottery-name-item {
      position: absolute;
      bottom: 23rpx;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      width: 70%;
      font-weight: 500;
      text-align: center;
      font-size: 12rpx;
      color: #fff;
    }
  }
  .cover-lottery {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.86);
    width: 85%;
    opacity: 0;
    animation: fade var(--timing) ease-in 0.2s 1 normal forwards;
  }

  .lottery-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.11);
    display: block;
    width: 101rpx;
  }
}

.unknown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  font-size: 54rpx;
  color: #fff;

  text-shadow: 0 0 5rpx #defc8b;
}

@keyframes flop-end {
  /* 剪影动画 */
  0% {
    --shadow: 0;
  }
  5% {
    --shadow: 1;
  }
  10% {
    --shadow: 1;
  }
  15% {
    --shadow: 0.3;
  }
  20% {
    --shadow: 0.8;
  }
  /* 剪影动画 end*/
  /* 翻牌动画 */
  30% {
    --shadow: 0;
    --m: -720deg;
    --f: -540deg;
  }
  40% {
    --m: -540deg;
    --f: -360deg;
  }
  50% {
    --m: -360deg;
    --f: -180deg;
  }
  55% {
    --m: -180deg;
    --f: 0deg;
    --sf: flex;
  }
  /* 翻牌动画 end*/
  /* 虚影缩放动画 */
  68% {
    --m: -180deg;
    --f: 0deg;
    --opy: 1;
    --sae: 1;
  }
  70% {
    --opy: 0.6;
    --sae: 1.2;
  }
  75% {
    --opy: 0;
    --sae: 1;
  }
  82% {
    --opy: 0.7;
    --sae: 1.3;
  }
  85% {
    --opy: 0.2;
    --sae: 1.1;
  }
  87% {
    --opy: 0.6;
    --sae: 1.2;
  }
  92% {
    --opy: 0.8;
    --sae: 1.05;
  }
  /* 虚影缩放动画 end*/
  95% {
    --opy: 0;
    --sae: 1.5;
  }
  100% {
    --opy: 0;
    --sae: 1;
    --m: -180deg;
    --f: 0deg;
    --shadow: 0;
    --sf: flex;
  }
}

@keyframes move-flash {
  0% {
    transform: scaleY(0.9) translateX(0%);
  }
  100% {
    transform: scaleY(0.9) translateX(-100%);
  }
}
</style>
